<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <style>
        #one{
            width: 100px;
            height: 100px;
            background-color: #0a9244;
        }
        .index{
            background-color: #0b80a5;
        }
        div{
            background-color: blue;
        }
        *{
            background-color: red;
        }
        [type="text"]{
            background-color: #1B172C;
        }
        [name ~= "floor"]{
            background-color: #7FFF00;
        }
        div,input{
            background-color: orange;
        }
        ul>li{/*空格时后代选择器 >是子代选择器*/
            background-color: bisque;
        }
        ol>li{
            background-color: white;
        }
        p+b{/*当前是第一个index；可以在后面添加(+b)改变index位置；
        如果要选择全部，用（p~b）*/
            background-color: blue;
        }
    /*    id选择器>class选择器>标签选择器>通用选择器*/
    </style>
</head>
<body>
    <div id="one" class="index"></div>
    <input type="text">
    <input type="password" name="floor">
    <input type="text" name="en-US">
    <input type="text" name="text">
    <ul>
        <li>index1</li>
        <li>index2</li>
        <li>index3</li>
        <ol>
            <li>index1</li>
            <li>index2</li>
            <li>index3</li>
        </ol>
        <li>index4</li>
        <li>index5</li>
    </ul>
    <p>index</p>
    <b>index</b>
    <b>index</b>
    <b>index</b>
    <b>index</b>
    <b>index</b>
    <p>index</p>
    <b>index</b>
    <b>index</b>
    <b>index</b>
    <b>index</b>
    <b>index</b>
</body>
</html>